<template>
  <div class="UserView">
    <bread-crumb-view :breadList="breadList"></bread-crumb-view>
    <div class="main">
      <el-row>
        <el-col :span="12">
          <search-view @getValue="getValue">
            <el-button type="primary" slot="btn" @click="addUser">
              添加用户
            </el-button>
          </search-view>
        </el-col>
      </el-row>
      <!-- 列表数据 -->
      <user-table :tableData="tableData" @deleteItem="deleteItem" @setItem="setItem" @setstate="setstate"
        @setRoles="setRoles"></user-table>
      <!-- 添加用户 -->
      <el-dialog title="添加用户" :visible.sync="adddialogForm">
        <el-form :model="form" :rules="rules" ref="ruleForm">
          <el-form-item label="账户" prop="username" :label-width="formLabelWidth">
            <el-input prefix-icon="el-icon-user" v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码" :label-width="formLabelWidth">
            <el-input prefix-icon="el-icon-lock" v-model="form.password" autocomplete="off" show-password></el-input>
          </el-form-item>
          <el-form-item prop="email" label="邮箱" :label-width="formLabelWidth">
            <el-input prefix-icon="el-icon-message" v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="mobile" label="手机号" :label-width="formLabelWidth">
            <el-input prefix-icon="el-icon-mobile-phone" v-model.number="form.mobile" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="adddialogForm = false">取 消</el-button>
          <el-button type="primary" @click="add('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑用户信息 -->
      <el-dialog title="修改用户信息" :visible.sync="setdialogForm">
        <el-form :model="setfrom">
          <el-form-item label="账户" :label-width="formLabelWidth">
            <el-input prefix-icon="el-icon-user" v-model="setfrom.username" autocomplete="off" :disabled="true">
            </el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input prefix-icon="el-icon-message" v-model="setfrom.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input prefix-icon="el-icon-mobile-phone" v-model="setfrom.mobile" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="setdialogForm = false">取 消</el-button>
          <el-button type="primary" @click="set">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 分配角色 -->
      <el-dialog title="分配角色" :visible.sync="rolesdialogForm">
        <el-form :model="rolesfrom">
          <p>当前操作用户：{{ rolesfrom.username }}</p>
          <p>当前操作用户角色：{{ rolesfrom.rname }}</p>
          <el-form-item>
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.id" :label="item.roleName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="rolesdialogForm = false">取 消</el-button>
          <el-button type="primary" @click="roles">确 定</el-button>
        </div>
      </el-dialog>
      <page-view :total="total"></page-view>
    </div>
  </div>
</template>
<script>
import BreadCrumbView from "@/components/BreadCrumbView.vue";
import SearchView from "@/components/SearchView.vue";
import UserTable from "./components/UserTable.vue";
import $user from "@/api/USER/user";
import PageView from "@/components/PageView.vue";
export default {
  components: { BreadCrumbView, SearchView, UserTable, PageView },
  name: "UserView",
  data() {
    return {
      value: "", //角色
      breadList: ["用户管理", "用户列表"],
      tableData: [], //列表数据
      adddialogForm: false, //添加用户
      setdialogForm: false, //修改用户
      rolesdialogForm: false, //分配角色
      form: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      }, //添加信息
      setfrom: {
        username: "",
        email: "",
        mobile: "",
        id: "",
      }, //修改信息
      rolesfrom: {
        username: "",
        rname: "",
        id: "",
      },
      formLabelWidth: "120px",
      rules: {
        username: [{ required: true, message: "请输入账户", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { type: "number", message: "请输入数字类型" },
        ],
      }, //添加用户校验
      options: [], //角色分类
      total: 0,
      size: 10,
      num: 1,
    };
  },
  created() {
    this.$nextTick(() => {
      this.getList();
      // 获取角色
      $user.RolesApi().then((res) => {
        this.options = res;
      });
    });
  },
  mounted() {
    this.$bus.$on("changeSize", (val) => {
      this.size = val;
      this.getList();
    });
    this.$bus.$on("changeNum", (val) => {
      this.num = val;
      this.getList();
    });
  },
  methods: {
    async getList() {
      let res = await $user.UserApi(this.num, this.size);
      this.tableData = res.users;
      this.total = res.total;
    },
    async getValue(val) {
      let res = await $user.SearchApi(val);
      this.tableData = [res];
    },
    setRoles(info) {
      this.rolesdialogForm = true;
      this.rolesfrom.username = info.uname;
      this.rolesfrom.rname = info.rname;
      this.rolesfrom.id = info.id;
    },
    async roles() {
      let obj = {
        id: this.rolesfrom.id,
        rid: this.value,
      };
      await $user.SetRolesApi(obj);
      console.log(this.value, this.rolesfrom.id);
      this.rolesdialogForm = false;
      this.getList();
    },
    addUser() {
      this.adddialogForm = true;
    },
    add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          $user.AddApi(this.form);
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.getList();
          this.adddialogForm = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    deleteItem(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $user.DeleteApi(id);
          this.getList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    setItem(info) {
      this.setfrom.username = info.username;
      this.setfrom.email = info.email;
      this.setfrom.mobile = info.mobile;
      this.setfrom.id = info.id;
      this.setdialogForm = true;
    },
    async set() {
      this.setdialogForm = false;
      await $user.SetApi(this.setfrom);
      this.getList();
    },
    async setstate(info) {
      await $user.SetStateApi(info);
      this.$message({
        message: "修改状态成功",
        type: "success",
      });
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.UserView {
  padding: 10px;
  box-sizing: border-box;

  .main {
    width: 100%;
    max-height: 800px;
    margin-top: 10px;
    border: 1px solid #eee;
    box-shadow: 2px 2px 10px #eee;
    padding: 20px;
    box-sizing: border-box;
  }
}
</style>